<button nz-button nzType="primary" (click)="showNewModal(null)">新增</button>

<nz-divider nzOrientation="left" nzText=""></nz-divider>
<div nz-row>
  <div nz-col [nzSpan]="18" [nzPush]="6">
    <nz-card nzTitle="基本信息" nzSize="small" [nzExtra]="extraTemplate">
      <div nz-row>
        <div nz-col nzSpan="8">
          名称：<nz-tag
            [nzColor]="'blue'"
            >{{ selectedOrg.name }}</nz-tag
          >

        </div>
        <div nz-col nzSpan="8">
          代码：<nz-tag [nzColor]="'blue'">{{ selectedOrg.code }}</nz-tag>
        </div>
        <div nz-col nzSpan="8">
          类型：<nz-tag [nzColor]="'blue'">{{
            selectedOrg.type === "UNIT" ? "组织单元" : "组织"
          }}</nz-tag>
        </div>
        <div nz-col nzSpan="24">
          上级：<a
            nz-tooltip
            nzTooltipTitle="设置上级"
            (click)="showParentDlg()"
            *ngIf="selectedOrg.id != undefined"
            ><i nz-icon nzType="edit" nzTheme="outline"></i
          ></a>
          <nz-tag
            nzColor="blue"
            [nzMode]="
              selectedOrg.parents.length === 1 ? 'default' : 'closeable'
            "
            (nzOnClose)="onTagClose(parent)"
            *ngFor="let parent of selectedOrg.parents"
          >
            {{ parent.name }}
          </nz-tag>
        </div>
        <div nz-col nzSpan="8">创建时间：{{ selectedOrg.createdDate }}</div>
        <div nz-col nzSpan="8">创建者：{{ selectedOrg.createdBy }}</div>
        <div nz-col nzSpan="8">
          最后更新时间：{{ selectedOrg.modifiedDate }}
        </div>
        <div nz-col nzSpan="8">最后更新者：{{ selectedOrg.modifiedBy }}</div>
      </div>
    </nz-card>

    <ng-template #extraTemplate>
      <a
        nz-tooltip
        nzTooltipTitle="编辑"
        (click)="showNewModal(selectedOrg)"
        *ngIf="selectedOrg.id != undefined"
        ><i nz-icon nzType="edit" nzTheme="outline"></i
      ></a>
      <a
        nz-tooltip
        nzTooltipTitle="删除"
        (click)="delOrganization(selectedOrg)"
        *ngIf="selectedOrg.id != undefined"
        ><i
          nz-icon
          nzType="delete"
          nzTheme="outline"
          [nzTheme]="'twotone'"
          [nzTwotoneColor]="'red'"
        ></i
      ></a>
    </ng-template>
  </div>
  <div nz-col [nzSpan]="6" [nzPull]="18">
    <div #testDiv class="div-org-tree"></div>
  </div>
</div>

<nz-modal
  [(nzVisible)]="isVisibleForNewModal"
  nzTitle="新增"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="submitForm()"
>
  <nz-content *nzModalContent>
    <form nz-form nzLayout="vertical" [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-control nzErrorTip="请选择组织类型！">
          <nz-radio-group formControlName="type">
            <label
              nz-radio
              *ngFor="let organizationType of organizationTypes"
              [nzValue]="organizationType.value"
              >{{ organizationType.label }}</label
            >
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>名称</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="请输入名称" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label>代码</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="code" placeholder="请输入代码" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="opAction === 'add'">
        <nz-form-label>请选择上级：</nz-form-label>
        <!-- <label nz-checkbox formControlName="isRoot">根组织</label> -->
        <app-organization-search
        ></app-organization-search>
      </nz-form-item>
    </form>
  </nz-content>
</nz-modal>

<nz-modal
  [(nzVisible)]="isVisibleForSetParent"
  nzTitle="设置上级"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="setParent()"
>
  <nz-content *nzModalContent>
    <label nz-checkbox [(ngModel)]="selectedOrg.isRoot">根组织</label>
    <app-organization-search
    ></app-organization-search>
  </nz-content>
</nz-modal>
